const $ = layui.$;
export default class AddStudent {
  constructor() {
    this.render();
    this.handle();
  }
  render() {
    let template = `
            <form class="layui-form" lay-filter="addForm">
            <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-block">
                <input
                type="text"
                name="name"
                required
                lay-verify="required"
                placeholder="请输入姓名"
                autocomplete="off"
                class="layui-input"
                />
            </div>
            </div>
            <div class="layui-form-item">
            <label class="layui-form-label">年龄</label>
            <div class="layui-input-block">
                <input
                type="text"
                name="age"
                required
                lay-verify="required"
                placeholder="请输入年龄"
                autocomplete="off"
                class="layui-input"
                />
            </div>
            </div>
            <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <input type="radio" name="gender" value="男" title="男">
                <input type="radio" name="gender" value="女" title="女">
            </div>
            </div>
            <div class="layui-form-item">
            <label class="layui-form-label">选择班级</label>
            <div class="layui-input-block">
                <select name="cls">
                    
                </select>
            </div>
            </div>
            <div class="layui-form-item">
            <label class="layui-form-label">上传头像</label>
            <div class="layui-input-block">
              <input type="hidden" name="headImage">
              <div class="layui-upload">
                <button type="button" class="layui-btn" id="addUploadBtn">上传图片</button>
                <div class="layui-upload-list">
                  <img class="layui-upload-img" style="width:100px;height:100px" id="addUploadImg" />
                  <p id="addUploadText"></p>
                </div>
              </div>
            </div>
            </div>
            </form>
        `;
    $("#addStudentTemplate").html(template);
  }
  handle() {
    let form = layui.form;
    let table = layui.table;
    let upload = layui.upload;
    $("#addBtn").click(function () {
      layer.open({
        type: 1,
        title: "增加学生", //不显示标题栏
        area: "300px;",
        shade: 0.6,
        id: "LAY_layuipro", //设定一个id，防止重复弹出
        btn: ["确认", "取消"],
        btnAlign: "c",
        moveType: 1, //拖拽模式，0或者1
        content: $("#addStudentTemplate").html(),
        yes() {
          console.log("yes", form.val("addForm"));
          $.ajax({
            type: "post",
            url: "/api/students",
            data: form.val("addForm"),
            success() {
              table.reload("studentTable");
            },
          });
          layer.closeAll();
        },
        success: function (layero) {
          // 打开增加窗口后执行的回调函数
          $.ajax({
            type: "get",
            url: "/api/classes/all",
            success(data) {
              let str = ``;
              for (let cls of data) {
                str += `<option value="${cls._id}">${cls.name}</option>`;
              }
              $("[name=cls]").html(str);
              form.render();
            },
          });
          // 上传组件的初始化
          //普通图片上传
          var uploadInst = upload.render({
            elem: "#addUploadBtn",
            url: "/upload", //改成您自己的上传接口
            before: function (obj) {
              //预读本地文件示例，不支持ie8
              obj.preview(function (index, file, result) {
                $("#addUploadImg").attr("src", result); //图片链接（base64）
              });
            },
            done: function (res) {
              //如果上传失败
              if (!res.filename) {
                return layer.msg("上传失败");
              }
              $("[name=headImage]").val(res.filename);
              //上传成功
            },
            error: function () {
              //演示失败状态，并实现重传
              var demoText = $("#addUploadText");
              demoText.html(
                '<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>'
              );
              demoText.find(".demo-reload").on("click", function () {
                uploadInst.upload();
              });
            },
          });
        },
      });
    });
  }
}
